<section class="tab-con tab-con-2">
    <#if isUnlocked == false>
			<div class="unlock-row">
				<div class="desc">
					Example shown below.  Unlock to view more.
				</div>
				<div>
                    <#if login == false>
						<button class="btn btn-info" onclick="toLogin()">Unlock Report</button>
                    <#else>
						<button class="btn btn-info" onclick="checkUnlockPermission(3)">Unlock Report</button>
                    </#if>
				</div>
			</div>
			<img class="demo-img" src="${request.contextPath}/static/img/demo_mobile_graphics.png">
			<div class="lock-mask">
				<div class="lock-row">
					<button class="btn btn-default" onclick="showExp(2)">Show Example</button>
                    <#if login == false>
						<button class="btn btn-info" onclick="toLogin()">Unlock Report</button>
                    <#else>
						<button class="btn btn-info" onclick="checkUnlockPermission()">Unlock Report</button>
                    </#if>
				</div>
			</div>
    <#else>
			<div class="chart-item">
				<div class="title">Gender</div>
				<div class="chart-con" id="genderChart" style="height: 270px;"></div>
			</div>
			<div class="chart-item">
				<div class="title">Age</div>
				<div class="chart-con" id="ageChart" style="height: 319px;"></div>
			</div>
			<div class="chart-item">
				<div class="title">Active Time Period (Hours)</div>
				<div class="chart-con" id="periodChart1" style="height: 264px;"></div>
			</div>
			<div class="chart-item">
				<div class="title">Active Time Period (Days)</div>
				<div class="chart-con" id="periodChart2" style="height: 264px;"></div>
			</div>
			<div class="chart-item">
				<div class="title">Country Distribution</div>
				<div class="chart-con" id="regionChart"></div>
			</div>
			<div class="chart-item">
				<div class="title">Language Distribution</div>
				<div class="chart-con" id="languageChart">
				</div>
			</div>
    </#if>
</section>